<script setup lang="ts">
import { ref, nextTick } from 'vue'
import * as echarts from 'echarts'
import { EChartsType } from 'echarts'
import { initDayOpts } from './echart'
import useUtils from '@/utils';
const { index } = useDashboard()
interface ICard {
  title: string
  price: number
  icon: string
  iconColor: string
  totalTitle: string
  total: number
  unit: string
}


// 定义一个查询参数
let queryObj = reactive({
  month: "",
  week: "",
  day: ""
})

let date = new Date();
// 定义3个图形的实例
let echart1: EChartsType | null = null;
let echart2: EChartsType | null = null;
let echart3: EChartsType | null = null;

const cards = ref<ICard[]>([])
const init = async (obj: Object = {}) => {
  const {
    departmentCount,
    userCount,
    recordCount,
    logCount,
    monthRecords,
    weekRecords,
    dayRecords } = await index(obj)
  //处理card数据
  cards.value = [
    {
      title: '员工',
      price: userCount,
      iconColor: 'text-violet-500',
      icon: 'fas fa-address-card',
      total: userCount,
      unit: "人",
      totalTitle: '总人数',
    },
    {
      title: '部门',
      price: departmentCount,
      iconColor: 'text-green-600',
      icon: 'fas fa-apple-alt',
      total: departmentCount,
      unit: "部",
      totalTitle: '部门数',
    },
    {
      title: '业务',
      price: recordCount,
      iconColor: 'text-blue-500',
      icon: 'fas fa-award',
      total: recordCount,
      unit: "件",
      totalTitle: '业务总数',
    },
    {
      title: '查询',
      price: logCount,
      iconColor: 'text-red-500',
      icon: 'fas fa-baseball-ball',
      total: logCount,
      unit: "次",
      totalTitle: '总记录数',
    },
  ]
  // 处理排名数据
  let monthOpt = initDayOpts(monthRecords)
  let weekOpt = initDayOpts(weekRecords)
  let dayOpt = initDayOpts(dayRecords)
  nextTick(() => {
    if (!echart1) {
      echart1 = echarts.init(document.getElementById('echart1') as HTMLDivElement)
    }
    if (!echart2) {
      echart2 = echarts.init(document.getElementById('echart2') as HTMLDivElement)
    }
    if (!echart3) {
      echart3 = echarts.init(document.getElementById('echart3') as HTMLDivElement)
    }
    echart1.setOption(monthOpt)
    echart2.setOption(weekOpt)
    echart3.setOption(dayOpt)
  })
}
init();

const dayChange = async (e: any) => {
  console.log(e)
  await init(queryObj)
}
const weekChange = async (e: any) => {
  console.log(queryObj)
  await init(queryObj)
}
const monthChange = async (e: any) => {
  console.log(e)
  await init(queryObj)
}
const disabledDate = (time: Date) => {
  return time.getTime() > Date.now()
}
</script>

<template>
  <div>
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-3 bg-gray-100">
      <el-card shadow="hover" :body-style="{ padding: '20px' }" v-for="(card, index) of cards" :key="index"
        class="cursor-pointer">
        <template #header>
          <div class="flex justify-between items-center">
            {{ card.title }}
            <el-tag type="danger" size="small" effect="dark">{{ card.unit }}</el-tag>
          </div>
        </template>

        <section class="flex mt-3 justify-between items-center">
          <span class="text-3xl">{{ card.total }}</span>
          <i :class="[card.icon, card.iconColor]" class="text-5xl"></i>
        </section>
        <section class="text-base mt-6 flex justify-between">
          {{ card.totalTitle }}
          <span class>{{ card.total }}</span>
        </section>
      </el-card>
    </div>

    <div class="mt-5 grid grid-cols-1 lg:grid-cols-3 gap-3">
      <el-card shadow="hover" :body-style="{ padding: '20px' }">
        <template #header>
          <div class="card-header">
            日排名
            <el-date-picker :default-value="new Date()" v-model="queryObj.day" :disabled-date="disabledDate"
              format="YYYY-MM-DD" value-format="YYYY-MM-DD" type="date" placeholder="选择日期" @change="dayChange" />
          </div>
        </template>
        <div id="echart3" class="h-96"></div>
      </el-card>
      <el-card shadow="hover" :body-style="{ padding: '20px' }">
        <template #header>
          <div class="card-header">
            周排名
            <el-date-picker v-model="queryObj.week" format="[Week] ww" type="week" value-format="YYYY-MM-DD"
              placeholder="选择周" @change="weekChange" />
          </div>

        </template>
        <div id="echart2" class="h-96"></div>
      </el-card>
      <el-card shadow="hover" :body-style="{ padding: '20px' }">
        <template #header>
          <div class="card-header">
            月排名
            <el-date-picker :default-value="new Date()" v-model="queryObj.month" format="YYYY-MM" value-format="YYYY-MM"
              type="month" placeholder="选择月" @change="monthChange" />
          </div>
        </template>
        <div id="echart1" class="h-96"></div>
      </el-card>
    </div>
  </div>
</template>

<style lang="scss">
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>
